<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
	<title>登录页面</title>
	<meta charset="UTF-8">
	<style>
		body {
			background-color: #f2f2f2;
			color: #333;
			font-family: Arial, sans-serif;
		}
		.container {
			width: 400px;
			margin: 0 auto;
			padding: 20px;
			background-color: #fff;
			border-radius: 10px;
			box-shadow: 0px 0px 10px #ccc;
		}
		h1 {
			text-align: center;
			color: #333;
		}
		input[type=text], input[type=password], input[type=number] {
			width: 100%;
			padding: 12px 20px;
			margin: 8px 0;
			display: inline-block;
			border: 1px solid #ccc;
			border-radius: 4px;
			box-sizing: border-box;
		}
		button {
			background-color: #4CAF50;
			color: white;
			padding: 14px 20px;
			margin: 8px 0;
			border: none;
			border-radius: 4px;
			cursor: pointer;
			width: 100%;
		}
		button:hover {
			background-color: #45a049;
		}
		.cancelbtn {
			width: auto;
			padding: 10px 18px;
			background-color: #f44336;
		}
		.container > p {
			text-align: center;
		}
		@media screen and (max-width: 600px) {
			.container {
				width: 100%;
			}
		}
		#code-container {
			display: flex;
			align-items: center;
		}
		img.code {
			margin-right: 10px;
			width: 30%;
			height: auto;
		}
	</style>
</head>
<body>
	<div class="container">
		<h1>登录</h1>
		<form id="signupForm">
			<label ><b>用户名</b></label>
			<input type="text" placeholder="请输入用户名" name="username" required>
			<label ><b>密码</b></label>
			<input type="password" placeholder="请输入密码" name="password" required>
			<label ><b>验证码</b></label>
			<div id="code-container">
				<input type="number" placeholder="请输入验证码" name="validateCode" required>
				<img th:src="@{/captcha/captchaImage(type=${captchaType})}" class="imgcode" width="85%"/>
			</div>
			<button type="submit">登录</button>
			<label>
				<input type="checkbox" checked="checked" name="rememberme"> 记住我
			</label>
		</form>
	</div>
	<script th:inline="javascript"> var ctx = [[@{/}]]; var captchaType = [[${captchaType}]]; </script>
	<!--[if lte IE 8]><script>window.location.href=ctx+'html/ie.html';</script><![endif]-->
	<!-- 全局js -->
	<script src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
	<script src="../static/ajax/libs/validate/jquery.validate.min.js" th:src="@{/ajax/libs/validate/jquery.validate.min.js}"></script>
	<script src="../static/ajax/libs/layer/layer.min.js" th:src="@{/ajax/libs/layer/layer.min.js}"></script>
	<script src="../static/ajax/libs/blockUI/jquery.blockUI.js" th:src="@{/ajax/libs/blockUI/jquery.blockUI.js}"></script>
	<script src="../static/ruoyi/js/ry-ui.js" th:src="@{/ruoyi/js/ry-ui.js?v=4.7.7}"></script>
	<script src="../static/ruoyi/login.js" th:src="@{/ruoyi/login.js}"></script>
</body>
</html>